import React from "react";
import {
  Tabs,
  TabList,
  Tab,
  TabPanel,
  TabPanels,
  Box,
  Image,
  useColorModeValue
} from "@chakra-ui/core";
import SignUp from "./SignUp";
import SignIn from "./SignIn";

import chakraUILight from "../assets/images/chakra-ui-light.png";
import chakraUIDark from '../assets/images/chakra-ui-dark.png';

export default function Form() {
  const bgColor = 'white';
  const chakraUI = useColorModeValue(chakraUILight, chakraUIDark)
  const boxPadding = '50px 50px 30px 50px';
  const defaultTabStyle = {
    border: "none !important",
    color: "#969696 !important",
    borderColor: "none"
  };
  const focusStyle = {
    boxShadow: "none",
    fontWeight: "700",
    color: "#ea6f5a !important",
    borderBottom: "2px solid #ea6f5a !important"
  };

  return (
    <Box bgColor={bgColor} p={boxPadding} w="100%" boxShadow="lg" borderRadius="lg">
      <Tabs isFitted>
        <TabList m="0 auto 50px">
          <Tab appearance="none" _focus={focusStyle} >登录</Tab>
          <Tab appearance="none" _focus={focusStyle}>注册</Tab>
        </TabList>
        <TabPanels>
          <TabPanel>
            <SignIn />
          </TabPanel>
          <TabPanel>
            <SignUp />
          </TabPanel>
        </TabPanels>
      </Tabs>
    </Box>
  );
}
